<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">变更</span>
    <el-card class="box-card">
        <el-button type="primary">填写申请</el-button>
        <el-button type="primary">完善并下载申请书</el-button>
        <el-button type="primary">申请书盖章并上传</el-button>
        <el-button type="primary">申请纸质批复</el-button>
        <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="num1" label="变更序号" width="180" ></el-table-column>
             <el-table-column prop="num2" label="课题编号" width="200" ></el-table-column>
             <el-table-column prop="num3" label="课题名称" width="350"></el-table-column>
             <el-table-column prop="num4" label="变更类型"></el-table-column>
             <el-table-column prop="num5" label="变更原因"></el-table-column>
             <el-table-column prop="num6" label="审查结果"></el-table-column>
             <el-table-column prop="num7" label="反馈意见"></el-table-column>
             <el-table-column prop="num8" label="纸质表申请"></el-table-column>
             <el-table-column label="操作"><el-link type="primary" @click=" dialogVisible = true">操作</el-link></el-table-column>
            </el-table>
    </el-card>
    <el-dialog
      title="变更"
      :visible.sync="dialogVisible"
      width="50%"
      >
    <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="课题名称">
          <el-select v-model="form.region" placeholder="请选择课题名称" style="width: 700px;">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变更类型">
          <el-select v-model="form.region2" placeholder="请选择变更类型" style="width: 700px;" @change="fzrChange">
            <el-option label="变更课程负责人" value="1"></el-option>
            <el-option label="变更课程组成员" value="2"></el-option>
          </el-select>
        </el-form-item>
        </el-form>
        <!-- 负责人 -->
        <el-form ref="form" :model="form" label-width="100px" v-if="fzr">
        <el-form-item label="变更负责人"> <el-link type="primary">+ 新增负责人</el-link></el-form-item>
            <el-table
                  :data="tableData2"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="data1" label="角色" width="110" ></el-table-column>
             <el-table-column prop="data2" label="姓名"  width="110"  ></el-table-column>
             <el-table-column prop="data3" label="性别"  width="60" ></el-table-column>
             <el-table-column prop="data4" label="职务" ></el-table-column>
             <el-table-column prop="data5" label="职称" style="text-overflow:ellipsis"></el-table-column>
             <el-table-column prop="data6" label="学历"></el-table-column>
             <el-table-column prop="data7" label="学科"></el-table-column>
             <el-table-column prop="data8" label="联系电话"></el-table-column>
            </el-table>
            <el-form-item label="科研成果" style="margin-top: 20px;">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <!-- 上传 -->
            <el-form-item label="推荐原因">
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <!--  -->
            <el-form-item label="变更原因" style="margin-top: 20px;">
              <el-input type="textarea" v-model="form.desc2"></el-input>
            </el-form-item>
    </el-form>
    <!-- 组员 -->
    <el-form ref="form" :model="form" label-width="100px"  v-if="member" >
        <el-form-item label="变更组成员">
            <el-link type="primary">+ 新增</el-link>
            <el-link type="danger" style="margin-left: 30px;">- 删除</el-link>
        </el-form-item>
        <el-table
                  ref="multipleTable"
                  :data="tableData3"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="data1" label="角色" width="110" ></el-table-column>
             <el-table-column prop="data2" label="姓名"  width="110"  ></el-table-column>
             <el-table-column prop="data3" label="性别"  width="60" ></el-table-column>
             <el-table-column prop="data4" label="职务" ></el-table-column>
             <el-table-column prop="data5" label="职称" style="text-overflow:ellipsis"></el-table-column>
             <el-table-column prop="data6" label="学历"></el-table-column>
             <el-table-column prop="data7" label="学科"></el-table-column>
             <el-table-column prop="data8" label="联系电话"></el-table-column>
            </el-table>
            <el-form-item label="变更原因" style="margin-top: 20px;">
              <el-input type="textarea" v-model="form.desc3" placeholder="请输入科研成果"></el-input>
            </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
    data(){
        return {
            fzr:false,
            member:false,
            dialogVisible:false,
            dialogImageUrl: '',
            dialogVisible2: false,
            form:{
                region:"",
                region2:"",
                desc:'',
                desc2:'',
                desc3:'',
            },
            tableData:[{
                num1:'20221217001',
                num2:'KT20221222',
                num3:'《古猿人进化史》',
                num4:'/',
                num5:'/',
                num6:'已通过',
                num7:'/',
                num8:'/',
            },{
                num1:'20221217001',
                num2:'KT20221222',
                num3:'《古猿人进化史》',
                num4:'/',
                num5:'/',
                num6:'已通过',
                num7:'/',
                num8:'/',
            }],
            tableData2:[{
                data1:'原负责人',
                data2:'张三',
                data3:'男',
                data4:'主任',
                data5:'教育类/...',
                data6:'博士',
                data7:'历史哲学',
                data8:'13788920192',
            },{
                data1:'/',
                data2:'王舞',
                data3:'男',
                data4:'主任',
                data5:'教育类/...',
                data6:'博士',
                data7:'历史哲学',
                data8:'13788920192',
            },{
                data1:'/',
                data2:'李斯',
                data3:'男',
                data4:'主任',
                data5:'教育类/...',
                data6:'博士',
                data7:'历史哲学',
                data8:'13788920192',
            }],
            tableData3:[{
                data1:'原成员',
                data2:'张三',
                data3:'男',
                data4:'班主任',
                data5:'教育类/...',
                data6:'博士',
                data7:'历史哲学',
                data8:'13788920192',
            },{
                data1:'原成员',
                data2:'王舞',
                data3:'男',
                data4:'教师',
                data5:'教育类/...',
                data6:'博士',
                data7:'历史哲学',
                data8:'13788920192',
            },{
                data1:'原成员',
                data2:'李斯',
                data3:'男',
                data4:'教师',
                data5:'教育类/...',
                data6:'博士',
                data7:'历史哲学',
                data8:'13788920192',
            }],
        }
    },
    components:{
    Header,
    Nav
  },
  methods:{
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      fzrChange(selectValue){
        if(selectValue == 1){
            this.fzr = true
            this.member= false
        }else{
            this.member = true
            this.fzr = false
        }
      }
  }
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -44%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 18px;
}
</style>